<template>
  <div class="container">
    <div class="mine_head">
        <image ref="head_pic" style="width:120px;height:120px" :src="userinfo.head_pic"></image>
        <text>{{userinfo.username}}</text>
        <div class="button_group" v-if="isNeedLogin">
          <wxc-button text="登录"
                      type="red"
                      size="small"
                      @wxcButtonClicked="wxcLoginClicked"></wxc-button>
          <wxc-button text="注册"
                      type="red"
                      size="small"
                      @wxcButtonClicked="wxcRegClicked"></wxc-button>
        </div>
        <div class="button_group" v-if="!isNeedLogin">
          <text>剩余抢额{{user_prize_money.usable_money}}</text>
        </div>

    </div>
    <div class="demo">
      <wxc-cell title="消费明细"
                :has-arrow="true"
                @wxcCellClicked="wxcCellClicked(0)"
                :has-top-border="true">
      </wxc-cell>
      <wxc-cell title="推广链接"
                          :has-arrow="true"
                          @wxcCellClicked="wxcCellClicked(1)"
                          :has-top-border="true">
      </wxc-cell>
      <wxc-cell title="商城订单"
                :has-arrow="true"
                @wxcCellClicked="wxcCellClicked(2)"
                :has-top-border="true">
      </wxc-cell>
      <wxc-cell title="地址管理"
                :has-arrow="true"
                @wxcCellClicked="wxcCellClicked(3)"
                :has-top-border="true">
      </wxc-cell>
      <wxc-cell title="退出登录" v-if="!isNeedLogin"
                          :has-arrow="true"
                          @wxcCellClicked="wxcCellClicked(5)"
                          :has-top-border="true">
      </wxc-cell>
    </div>


  </div>
</template>

<script>
  import { WxcCell,WxcButton  } from 'weex-ui';
  var modal = weex.requireModule("bmModal");

  var globalEvent = weex.requireModule('globalEvent');
  export default {
    components: { WxcCell, WxcButton },
    data: function(){
      return {
        userinfo : {
            username: "未登录",
            head_pic: "https://vuejs.org/images/logo.png"
        },
        user_prize_money: {},
        isNeedLogin: true,
      }
    },
    methods: {
      wxcCellClicked (i) {
        switch (i) {
          case 0:
            this.$router.open({
                name: 'mine.marketorder',
                type: 'PUSH'
            });
            break;
          case 1:
            this.$router.toWebView({
              url: 'https://888.ph100.cn/h5_kym/html5/project/info.html',
              title: '推广链接',
              navShow: true
            })

            break;
          case 2:
              this.$router.open({
                  name: 'mine.shoporder',
                  type: 'PUSH'
              });
              break;
          case 3:
              this.$router.open({
                  name: 'mine.address',
                  type: 'PUSH'
              });
              break;
          case 5:
            this.$router.open({
                name: 'Login',
                type: 'PUSH'
            });
            break;
          default:
            this.$router.open({
                name: 'web',
                type: 'PUSH',
                params: {
                  url:'https://888.ph100.cn/h5_kym/html5/project/info.html'
                }
            });
        }

      },
      wxcLoginClicked (e) {
        this.$router.open({
            name: 'Login',
            type: 'PUSH'
        })
      },
      wxcRegClicked (e) {
        console.log("reg");
        this.$notice.loading.show("loading");
        this.$fetch({
          method: 'GET',    // 大写
          url:'https://888.ph100.cn/userInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
          data: {
            count: 1
          }
        }).then(resData => {
          // 成功回调
          console.log(resData);
          this.$notice.loading.hide();
        }, error => {
          // 错误回调
          console.log(error);
          this.$notice.loading.hide();
        });
      },
      getUserInfo() {
        this.$notice.loading.show("loading");
        this.$fetch({
          method: 'GET',    // 大写
          url:'https://888.ph100.cn/userIndex', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
          data: {

          }
        }).then(resData => {
          // 成功回调
          console.log(resData);
          this.$notice.loading.hide();
          this.userinfo.username = resData["user"]["wecha_name"];
          this.userinfo.head_pic = resData["user"]["wecha_logourl"];

          this.user_prize_money = resData["user_prize_money"];
          this.isNeedLogin = false;

          //this.$refs["heda_pic"].src = this.userinfo.head_pic;
        }, error => {
          // 错误回调
          console.log(error);
          this.$notice.loading.hide();
        });

      },
    },
    created: function() {
      this.getUserInfo();

      this.$event.on('getParams', (params) => {
          // params 为触发该事件所传的参数
          this.getUserInfo();
      });
    },
    eros: {
        // app 前后台相关 start
        appActive() {
            console.log('appActive');
        },
        appDeactive() {
            console.log('appDeactive');
        },
        // app 前后台相关 end

        // 页面周期相关 start
        beforeAppear (params, options) {
            console.log('beforeAppear');
        },
        beforeBackAppear (params, options) {
            console.log('beforeBackAppear');
        },
        appeared (params, options) {
            console.log('appeared');
        },

        backAppeared (params, options) {
            console.log('backAppeared');
        },
        beforeDisappear (options) {
            console.log('beforeDisappear');
        },
        disappeared (options) {
            console.log('disappeared');
        },
        // 页面周期相关 end

        // 局部个推通知
        pushMessage (options) {
            console.log('pushMessage');
        }
    }
  };
</script>
<style scoped>
  .mine_head{
    padding: 8px,8px,8px,8px;
    align-content: center;
    align-items: center;
    background-color: #ffffff
  }
  .button_group{
    margin-top: 16px;
    flex-direction: row;
    justify-content: space-around;
  }
</style>
